<template>
	<view>
		<uni-nav-bar dark :fixed="true" shadow bgimage="linear-gradient(to right, #4facfe 0%, #00f2fe 100%)" status-bar
			left-icon="left" left-text="返回" title="商家入驻" @clickLeft="back" />
		<view class="uni-nav-bar-empty-v"></view>
		<view style="padding: 20rpx;">
			<form @submit="addMerchant">
				<view class="grace-form-item" style="margin-bottom: 15rpx;">
					<text class="grace-form-label">商家名称</text>
					<view class="grace-form-body">
						<input type="text" class="form-input" name="merchantName" v-model="merchant.merchantName"
							placeholder="请输入" />
					</view>
				</view>
				<view class="grace-form-item" style="margin-bottom: 15rpx;">
					<text class="grace-form-label">联系电话</text>
					<view class="grace-form-body">
						<input type="number" class="form-input" name="phone" v-model="merchant.phone"
							placeholder="请输入" />
					</view>
				</view>
				<view class="grace-form-item" style="margin-bottom: 15rpx;">
					<text class="grace-form-label">商家地点</text>
					<view class="grace-form-body" style="display: flex;justify-content:left;align-items:center;flex-wrap: wrap;">
						<input type="text" class="form-input" style="width: 420rpx;" name="place" v-model="merchant.place" placeholder="请输入" />
						<text class="grace-gtbg-blue-sky" style="margin-left: 25rpx; display: flex;justify-content:center;align-items:center;width: 80rpx;height: 50rpx;border-radius: 15rpx;" @click="location">定位</text>
					</view>
				</view>
				<view class="grace-form-item" style="margin-bottom: 15rpx;">
					<text class="grace-form-label">详细位置</text>
					<view class="grace-form-body">
						<input type="text" class="form-input" name="address" v-model="merchant.address"
							placeholder="请输入" />
					</view>
				</view>
				<view class="grace-form-item" style="margin-bottom: 15rpx;">
					<text class="grace-form-label">商家简介</text>
					<view class="grace-form-body"
						style="padding:20rpx 0;background-color: #f8f9f9;margin-top: 5rpx;margin-bottom: 5rpx;border-radius: 5rpx;">
						<textarea class="grace-textarea" style="padding: 10rpx;" name="description"
							v-model="merchant.description" placeholder="请输入" />
					</view>
				</view>
				<view class="grace-form-item" style="margin-bottom: 15rpx;">
					<text class="grace-form-label">商家类型</text>
					<view class="grace-form-body">
						<picker class="grace-form-picker" @change="bindPickerChange" :value="genderIndex"
							:range="gender" name="merchantType">
							<view class="grace-flex grace-nowrap grace-flex-end grace-flex-vcenter">
								<text class="grace-text">{{gender[genderIndex]}}</text>
								<text class="grace-icons icon-arrow-down" style="margin-left:5px;"></text>
							</view>
						</picker>
					</view>
				</view>
				<!-- 图片选择  -->
				<view class="grace-title grace-margin-top">
					<!-- <view class="grace-title-border"></view> -->
					<text class="grace-title-text grace-black">请选择商家照片(1张)</text>
					<text class="grace-text-small grace-gray grace-icons icon-remove" @tap="clearAllImgs">清空图片</text>
				</view>
				<graceSelectImg :maxFileNumber="1" @removeImg="removeImg" @change="imgsChange" :imgLists="imgs">
				</graceSelectImg>

				<view class="submit-button">
					<button type="primary" style="background-color: #3687FF;width:calc(100vw - 40rpx);"
						@click="addMerchant">
						<text class="grace-icons" style="padding-right:12rpx;"></text>添加
					</button>
				</view>
			</form>
		</view>
	</view>
</template>

<script>
	import graceSelectImg from "@/graceUI/components/graceSelectImg.vue";
	import {
		add
	} from '@/api/merchant.js';
	import {
		upload
	} from '@/api/api.js';
	export default {
		components: {
			graceSelectImg
		},
		data() {
			return {
				gender: ['请选择', '服饰', '食品', '家具'],
				genderIndex: 0,
				merchant: {
					merchantName: '',
					merchantIcon: '',
					merchantType: '',
					location: '',
					latitude:null,
					longitude:null,
					address: '',					
					place: '',
					phone: '',
					description: ''
				},
				imgs: []
			}
		},
		methods: {
			back() {
				uni.navigateBack({
					delta: 1
				})
			},
			addMerchant() {
				uni.showLoading({
					title: '添加中',
					icon: 'loading'
				});
				this.batchImgs(this.imgs).then(() => {
					this.merchant.merchantIcon = this.imgs[0]
					add(this.merchant).then(response => {
						uni.showLoading({
							title: '完成',
							icon: 'success'
						});
						setTimeout(function() {
							uni.hideLoading();
							uni.navigateBack();
						}, 2000);
					}).catch(error => {
						uni.showLoading({
							title: '失败',
							icon: 'fail'
						});
						setTimeout(function() {
							uni.hideLoading();							
						}, 2000);
					});
				});
			},
			batchImgs(imgs) {
				// 创建一个 Promise 数组，每个 Promise 对应一个图片上传操作
				const uploadPromises = imgs.map((item) => {
					return new Promise((resolve, reject) => {
						upload(item.url).then(response => {
							item['response'] = response.replace(/"/g, "");
							console.log(response);
							console.log(item);
							resolve(); // 当上传完成时，解决 Promise
						}).catch(error => {
							reject(error); // 如果上传失败，拒绝 Promise
						});
					});
				});

				// 使用 Promise.all 等待所有的上传操作完成
				return Promise.all(uploadPromises);
			},
			clearAllImgs() {
				this.imgs = []
			},
			imgsChange: function(res) {
				console.log('选择的图片数据变化了');
				console.log(res);
			},
			removeImg: function(e) {
				console.log('被删除的图片信息');
				console.log(e);
			},
			bindPickerChange(e) {
				console.log(e)
				if (e.detail.value != '' && e.detail.value != '0') {
					this.merchant.merchantType = e.detail.value
					this.genderIndex = e.detail.value
				}
			},
			location() {
				console.log("location")
				var that = this
				uni.chooseLocation({
				    success: function (res) {
						console.log(res)
						that.merchant.place = res.name;
						that.merchant.address = res.address;
						that.merchant.latitude = res.latitude;
						that.merchant.longitude = res.longitude;
						console.log(that.merchant)
				    }
				});

			}
		}
	}
</script>

<style>
	.submit-button {
		padding-inline: 20rpx;
		position: fixed;
		left: 0;
		bottom: 50rpx;
		width: calc(100vw - 40rpx);
		height: 50px;
		z-index: 1000;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-wrap: wrap;
	}

	.grace-border-b {
		border-color: #F8F8F8;
	}

	.grace-check-item-v {
		width: 100%;
		padding: 15rpx 0;
	}

	.form-input {
		background-color: #f8f9f9;
		height: 80rpx;
		padding-left: 15rpx;
		border-radius: 10rpx;
		color: #555555;
	}
</style>